<template>
  <div>
    <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" v-if="isTypeSelection" />
      <el-table-column
        align="center"
        v-for="item in tableHead"
        :label="item.label"
        :width="item.width || 'auto'"
        :property="item.prop"
        :show-overflow-tooltip="tooltip"
      >
        <template #default="scope">
          <!-- 显示操作按钮 -->
          <div v-if="item.type === 'button'">
            <span v-for="(btn, index) in item.buttons" :key="index">
              <el-button
                link
                :type="btn.type"
                v-if="btn.show || btn.show === undefined"
                size="small"
                :plain="btn.plain"
                @click="$emit(btn.event, scope.row)"
                >{{ btn.text }}
              </el-button>
            </span>
          </div>

          <!-- 对时间特殊处理，不展示秒 -->
          <span v-else-if="item.prop === 'addtime'">
            {{ moment(scope.row.addtime).format('YYYY-MM-DD HH:mm') }}
          </span>

           <!-- 文本可点击 -->
           <el-button
                link
                type="primary"
            v-else-if="item.prop === 'title'"
            @click="testDetails(scope.row)"
          >
            {{ scope.row.title }}
          </el-button>

          <!-- 否则显示基础数据 -->
          <span v-else>
            {{
              item.formatter ? item.formatter(scope.row) : scope.row[item.prop!]
            }}
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { ElTable } from 'element-plus';
import moment from 'moment';

// props js 写法
// const props = defineProps({
//     isTypeSelection: {
//       type: Boolean,
//       default: true
//     }
// })

// props ts 写法

const props = withDefaults(
  defineProps<{
    isTypeSelection?: boolean;
    tooltip?: boolean;
    tableHead: any[];
    tableData: any[];
  }>(),
  {
    isTypeSelection: true,
    tooltip: true,
    tableHead: () => [],
    tableData: () => [],
  }
);

interface User {
  date: string;
  name: string;
  address: string;
}

const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<User[]>([]);
const emit = defineEmits(['tableSelected','testDetail']);
const handleSelectionChange = (val: any) => {
  // let ids = val.map((item:any)=> item.id)
  // console.log(ids);
  emit('tableSelected', val);
};

// 试卷点击试卷名称详情
const testDetails = (row: any) => {
  emit('testDetail', row);
};
</script>

<style lang="less" scoped>
.el-button {
  margin-right: 10px;
}
</style>
